<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>通讯录</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="./layui/css/layui.css">
		<script src="./layui/layui.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
	</head>

	<body>
		<div class="layui-tab layui-tab-brief  " lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title ">
				<li class="layui-this layui-bg-blue">外部通讯录</li>
				<li class="layui-bg-orange">内部通讯录</li>
			</ul>
			<div class="layui-tab-content" style="height: 100px;">

				<div class="layui-tab-item layui-show">

					<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
						<div class="layui-form-item">
							<label class="layui-form-label">姓名</label>
							<div class="layui-input-inline">
								<input class="layui-input" name="abname" id="abname" lay-verify="required" />
							</div>
							<button class="layui-btn" id="sserach" data-type="reload">搜索</button>
						<button class="layui-btn" id="chongzhi" data-type="reload"><i class="layui-icon layui-icon-refresh-1"></i></button>
						</div>
					</div>
					<table id="ddemo" lay-filter="test"></table>
					<script type="text/html" id="barDemo">

						<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
						<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
					</script>
					<script type="text/html" id="toolbarDemo">
						<div class="layui-btn-container">
							<button class="layui-btn layui-btn-sm" lay-event="add">新建联系人</button>
						</div>
					</script>
					<script>
						layui.use(['table', 'form'], function() {
							var ttable = layui.table;
							var $ = layui.jquery; //引入jquery
							var form = layui.form;
							//解决跨域
							$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
								options.xhrFields = {
									withCredentials: true
								}
							})


							//第一个实例
							ttable.render({
								elem: '#ddemo',
								toolbar: '#toolbarDemo' //开启头部栏工具
									,
								url: globalData.server + './Addressbook/aAll' //数据接口
									,
								page: true //开启分页
									,
								method: 'POST',
								id: 'sidTest',
								cols: [
									[ //表头
										{
											field: 'id',
											title: 'ID',
											sort: true,
											fixed: 'left',
											align: 'center'
										}, {
											field: 'abname',
											title: '姓名',
											align: 'center'
										}, {
											field: 'absex',
											title: '性别',
											align: 'center'
										}, {
											field: 'abtel',
											title: '手机号',
											align: 'center'
										}, {
											field: 'right',
											title: '操作',
											toolbar: '#barDemo',
											align: 'center'
										}
									]
								]
							});
							$('#sserach').on('click', function() {
								var abname = $("#abname").val(); //上面搜索框的id
								table.reload('sidTest', {
									where: { //请求参数
										'abname': abname,
									}
								});
							});
	/* 重置文本框 */
				$('#chongzhi').on('click', function() {
					$(":input").val('');
					table.reload('idTest', {
						where: { //请求参数
							'name': name,
						}
					});
				});
							//监听头部工具栏
							ttable.on('toolbar(test)', function(obj) {
								switch(obj.event) {
									case 'add':
										layer.open({ //打开一个页面
											type: 2, //在当前页面打开一个页面
											area: ['500px', '550px'], //页面宽高
											content: 'addressbook-add.html', //页面地址
											title: '新建联系人', //打开页面标题
											end: function() {
												window.location.reload(); //当窗口关闭后刷新页面
											}
										});
										break;
								};
							});
							//监听工具条
							ttable.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
								var data = obj.data; //获得当前行数据
								if(obj.event === 'del') { //删除
									layer.confirm('真的删除行么', function(index) {
										var url = globalData.server + './Addressbook/delete'; //请求地址
										$.post(url, {
											id: obj.data.id,
										}, function(data) {
											if(data.count > 0) {
												console.log('删除成功');
												window.location.reload(); //刷新页面
											} else {
												layer.msg(data.msg, {
													icon: 6
												});
											}
										}, "json");
									});
								} else if(obj.event === 'edit') { //编辑
									layer.open({ //打开一个页面
										type: 2, //在当前页面之上以弹框的形式，展示编辑页面
										area: ['500px', '550px'], //页面宽高
										content: 'addressbook-edit.html', //页面所在位置
										title: '您正在编辑用户编号为' + obj.data.id + '的信息',
										success: function(layero, index) {
											var body = layer.getChildFrame('body', index);
											body.contents().find("#id").val(obj.data.id);
											body.contents().find("#abname").val(obj.data.abname);
											body.contents().find("#absex").val(obj.data.absex);
											body.contents().find("#abtel").val(obj.data.abtel);
										},
										end: function() {
											window.location.reload(); //当窗口关闭后刷新页面
										}
									});
								}
							});

						});
					</script>

				</div>
				<div class="layui-tab-item">

					<div class="layui-form-item" style="margin-top: 20px" onsubmit="false">
						<div class="layui-form-item">
							<label class="layui-form-label">姓名</label>
							<div class="layui-input-inline">
								<input class="layui-input" name="loginName" id="loginName" lay-verify="required" />
							</div>
							<button class="layui-btn" id="serach" data-type="reload">搜索</button>
						</div>
					</div>
					<table id="demo" lay-filter="test"></table>

					<script>
						layui.use(['table', 'form'], function() {
							var table = layui.table;
							var $ = layui.jquery; //引入jquery
							var form = layui.form;
							//解决跨域
							$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
								options.xhrFields = {
									withCredentials: true
								}
							})
							//第一个实例
							table.render({
								elem: '#demo',
							
								
								url: globalData.server + './users/getUser' //数据接口
									,
								page: true //开启分页
									,
								method: 'POST',
								id: 'idTest',
								cols: [
									[ //表头
										{
											field: 'id',
											title: 'ID',
											sort: true,
											fixed: 'left',
											align: 'center'
										}, {
											field: 'loginName',
											title: '姓名',
											align: 'center'
										}, {
											field: 'protectMtel',
											title: '手机号',
											align: 'center'

										}
									]
								]
							});
							$('#serach').on('click', function() {
								var loginName = $("#loginName").val(); //上面搜索框的id
								table.reload('idTest', {
									where: { //请求参数
										'loginName': loginName,
									}
								});
							});

						});
					</script>

				</div>

			</div>

		</div>
	</body>

</html>